<script setup lang="tsx">
import { ref, onMounted, reactive } from 'vue'
import { FullScreen } from '@element-plus/icons-vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { getCODEInfoAPI } from '@/api/search/index'
const props = defineProps({
  id: { type: String, required: true }
})
const logs = ref([])

const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 3
})
// 全屏显示
const dialogVisible = ref(false)
const dialogContent = ref()
// 全屏
const changeFullscreen = (item: any) => {
  const activeTab = item.tabs.find((tab: { name: any }) => tab.name === item.tabActive)
  dialogVisible.value = true
  dialogContent.value = activeTab.data
}
const getInfo = (id: string) => {
  getCODEInfoAPI(id).then((res) => {
    let { code, rows, total } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      rows.map((ele: any) => {
        if (ele.tabs.length) ele.tabActive = ele.tabs[0].name
      })
      logs.value = rows
      page.total = total
    }
  })
}

onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <div class="info-con" v-for="item in logs" :key="item.id">
    <div class="left">
      <div class="xgpt">
        <div class="app">
          <span class="label">发现时间：</span>
          <span class="content">{{ item.time }}</span>
        </div>
        <div class="app">
          <span class="label">涉及域名：</span>
          <span class="content">{{ item.host.join(',') }}</span>
        </div>
        <div class="app">
          <span class="label">涉及帐密：</span>
          <span class="content">user:{{ item.user.user }}</span>
          <span>,</span>
          <span class="content">pwd:{{ item.user.pwd }}</span>
        </div>
        <div class="app">
          <span class="label">涉及人员：</span>
          <span class="content">{{ item.email.join(',') }}</span>
        </div>
        <div class="app">
          <span class="label">涉及IP：</span>
          <span class="content">{{ item.ip.join(',') }}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="view">
        <div class="fullScreenIcon" @click="changeFullscreen(item)">
          <jm-icon>
            <FullScreen />
          </jm-icon>
        </div>
        <jm-tabs v-model="item.tabActive">
          <jm-tab-pane :label="item2.name" :name="item2.name" v-for="(item2, index2) in item.tabs" :key="index2">
            <pre class="view-con">{{ item2.data }}</pre>
          </jm-tab-pane>
        </jm-tabs>
      </div>
    </div>
    <!-- 全屏显示 -->
    <jm-dialog v-model="dialogVisible" :modal="true">
      <template #header>
        <p v-html="dialogContent"></p>
      </template>
    </jm-dialog>
  </div>
  <!-- 分页 -->
  <jmp-pagination v-model:page="page.pageNum" v-model:limit="page.pageSize" v-model:total="page.total" />
</template>
<style scoped lang="scss">
.flex {
  display: flex;
}

.search {
  margin-bottom: 1.25rem;

  .input {
    flex: 1;
    margin-right: 0.625rem;
  }
}

.tags {
  margin-left: 0.3125rem;
}

.info-con {
  display: flex;
  padding: 0.625rem;
  margin-bottom: 1.25rem;
  border: var(--el-border);

  .left {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .xgpt {
      flex: 1;
      padding: 1.25rem;
      margin-top: 0.625rem;
      background-color: var(--el-color-info-light-9);
      color: var(--el-text-color-regular);

      .app {
        margin-bottom: 1.25rem;

        .content {
          word-break: break-all;
        }
      }
    }
  }

  .right {
    width: 45%;
    margin-left: 0.625rem;

    .view {
      position: relative;
      height: 100%;
      border: var(--el-border);
      border-radius: 0.3125rem;

      .fullScreenIcon {
        position: absolute;
        top: 0.625rem;
        right: 0.625rem;
        cursor: pointer;
        z-index: 2;
      }

      .view-con {
        padding: .5rem;
        height: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar-track-piece {
          background-color: var(--el-fill-color-blank);
        }

        &::-webkit-scrollbar {
          width: 0.375rem;
          width: 0.375rem;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 1.25rem;
          background-color: var(--el-text-color-disabled);
        }
      }
    }
  }
}

:deep(.el-tabs.el-tabs--top) {
  height: 100%;

  .el-tabs__content {
    height: calc(100% - 3.4375rem);

    .el-tab-pane {
      height: 100%;
    }
  }

  .el-tabs__header {
    .el-tabs__nav-wrap {
      padding: 0 0.625rem;
    }
  }
}
</style>
